<template>
  <view class="volunteer-item" @click="openDetail(props.item)">
    <view class="u-center">
      <img :src="$countImgUrl(props.item?.customer?.face)" class="avater">
      <view class="u-line-1" style="max-width:108rpx">{{ props.item?.contact?.contactName }}{{ props.item?.contact?.contactGender === 'male' ? '先生' : '女士'}}</view>
    </view>
    <view class="over" v-if="props.item.displayStatus === 1">
      已求助
    </view>
    <view class="item-s">
      <view class="fx">
        <img class="icon" src="https://img.qumoyugo.com/webimgbg/pet-icon-help-blood-ip.png">
        <view class="u-line-1">
          点击查看
        </view>
      </view>
      <view class="fx">
        <img class="icon" src="https://img.qumoyugo.com/webimgbg/pet-icon-help-blood-wx.png">
        <view class="u-line-1">
          点击查看
        </view>
      </view>
      <view class="fx">
        <img class="icon" :src="`https://img.qumoyugo.com/webimgbg/pet-icon-help-blood-${props.item?.bloodPet?.petType}.png`">
        <view class="u-line-1">
          {{ props.item?.bloodPet?.bloodType }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
const { $countImgUrl } = getCurrentInstance().appContext.config.globalProperties
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => {}
  }
})
const emit = defineEmits(['openDetail'])
const openDetail = (item) => {
  emit('openDetail', item)
}
</script>

<style scoped lang="scss">
.volunteer-item{
  height: 290rpx;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px 0px rgba(198, 198, 198, 0.5);
  border-radius: 12rpx;
  font-size: 24rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  color: #666;
  .title{
    font-size: 28rpx;
    color: #333333;
  }
}
.avater{
  width: 46rpx;
  height: 46rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}
.img{
  width: 40rpx;
  height: 30rpx;
}
.icon{
  width: 36rpx;
  height: 36rpx;
  margin-right: 6rpx;
}
img{
  margin-right: 12rpx;
}
.over{
  width: 100rpx;
  height: 34rpx;
  background: #FFE057;
  border-radius: 100rpx;
  font-size: 22rpx;
  text-align: center;
  color: #333;
  line-height: 34rpx;
}
.item-s{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 120rpx;
  padding: 0 8rpx;
  .fx{
    display: flex;
  }
}
</style>
